<script>
import { getShowImage, handleUrlParams } from "../../../utils";

export default {
  name: "index",
  methods: {
    getShowImage,
    unitClick(item) {
      let path;
      //单词列表
      if (this.currentMode === "背") {
        path = "/vocabulary/pages/thesaurusDetails/list";
      } else if (this.currentMode === "练") {
        path = "/vocabulary/pages/thesaurusDetails/practice";
      }
      uni.navigateTo({
        url: handleUrlParams(path, {
          thesaurusId: this.thesaurusDetail.thesaurusId,
          thesaurusName: this.thesaurusDetail.thesaurusName,
          current: item,
        }),
      });
    },
  },
  data() {
    return {
      thesaurusDetail: {},
      pageList: [], //词库页码列表
      currentMode: "背",
      pagination: {
        size: 10,
      },
    };
  },
  onLoad(query) {
    if (query.detail) {
      this.thesaurusDetail = JSON.parse(decodeURIComponent(query.detail));
      //根据词库单词数，算出页码列表
      const pageCount = Math.ceil(
        this.thesaurusDetail.thesaurusNum / this.pagination.size,
      );
      for (let i = 0; i < pageCount; i++) {
        this.pageList.push(i + 1);
      }
      //动态设置页面标题
      uni.setNavigationBarTitle({
        title: this.thesaurusDetail.thesaurusName,
      });
    }
  },
};
</script>

<template>
  <view class="page">
    <view class="thesaurus-info">
      <view class="left">
        <image
          class="icon"
          :src="getShowImage(thesaurusDetail.thesaurusImg)"
          mode="aspectFill"
        ></image>
      </view>
      <view class="right">
        <view class="thesaurusName row">{{
          thesaurusDetail.thesaurusName
        }}</view>
        <view class="row notes">
          <template v-if="thesaurusDetail.thesaurusYear">
            <text>{{ thesaurusDetail.thesaurusYear }}年</text>
            <text>\t-\t</text>
          </template>
          <text>{{ thesaurusDetail.thesaurusNotes }}</text>
        </view>
        <view class="row thesaurus-number">
          <text>共\t</text>
          <text>{{ thesaurusDetail.thesaurusNum }}</text>
          <text>\t个词</text>
        </view>
      </view>
    </view>
    <view class="divide-line"></view>
    <view class="header">
      <view class="left">
        <view class="thesaurus-page-list-title">
          <text>Units\t单元</text>
        </view>
        <view class="tips">
          <text>注：每个单元里有10个单词</text>
        </view>
      </view>
      <view class="right">
        <!--				切换 单词列表 / 练习-->
        <view
          class="switcher"
          @click="currentMode = currentMode === '背' ? '练' : '背'"
        >
          <view :class="['item', currentMode === '背' ? 'active' : '']"
            >背
          </view>
          <view :class="['item', currentMode === '练' ? 'active' : '']"
            >练
          </view>
        </view>
      </view>
    </view>
    <!--		词库页码列表-->
    <view class="thesaurus-page-list">
      <view
        class="thesaurus-page-item"
        v-for="item in pageList"
        :key="item"
        @click="unitClick(item)"
      >
        {{ item }}
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.page {
  .thesaurus-info {
    padding: 30rpx;
    display: flex;
    .left {
      width: 150rpx;
      height: 180rpx;
      border-radius: 30rpx;
      overflow: hidden;
      .icon {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      width: 0;
      flex: 1;
      margin-left: 30rpx;
      height: 180rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .thesaurusName {
        font-size: 40rpx;
      }
      .notes {
        font-size: 30rpx;
        color: var(--text-color-light);
      }
      .thesaurus-number {
        font-size: 30rpx;
      }
    }
  }
  .divide-line {
    height: 30rpx;
    background-color: var(--gray-background-color);
  }
  .header {
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      .thesaurus-page-list-title {
        font-size: 40rpx;
        font-weight: bold;
      }
      .tips {
        margin-top: 20rpx;
        font-size: 30rpx;
        color: var(--text-color-light);
      }
    }
    .right {
      .switcher {
        border-radius: 30rpx;
        height: 60rpx;
        width: 200rpx;
        display: flex;
        border: 2rpx solid var(--dark-border-color);
        overflow: hidden;
        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 0;
          flex: 1;
          transition: background-color 0.3s;
          &:not(:last-child) {
            border-right: 2rpx solid var(--dark-border-color);
          }
          font-size: 32rpx;
          &.active {
            background: #409eff;
            color: white;
          }
        }
      }
    }
  }
  .thesaurus-page-list {
    display: flex;
    flex-wrap: wrap;
    padding: 30rpx;
    .thesaurus-page-item {
      //排除行的末尾元素
      &:not(:nth-child(5n)) {
        margin-right: 30rpx;
      }
      height: 100rpx;
      width: calc((100% - 120rpx) / 5);
      border-radius: 30rpx;
      background-color: var(--theme-color);
      margin-bottom: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
    }
  }
}
</style>
